<template>
    <div class="divisionG">
        <div class="choice">
            <scroller class="scroller choiceItem" scroll-direction="horizontal">
                <p class="textParent" v-for="(item, ind) in placeNameAll" :key="ind" @click="dele(ind)">
                    <text class="standardDirection" v-if="ind != '0'">></text><text class="placeName" ref="placeOne">{{item}}</text>
                </p>
            </scroller>
            <div class="sure" @click="sureBtn">
                <text class="sureItem">确定</text>
            </div>
        </div>
        <list class="listCont">
            <cell class="listContItem" v-for="(item, index) in datalist" :key="index" @click="polling(index, item.XZQHDM)" :class="[index === activeIndex ? 'active' : '']" >
                <text class="text" ref="item" :class="[index === activeIndex ? 'active' : '']">{{item.XZQHMC}}</text>
            </cell>
        </list>
    </div>
</template>
<script>
import { getCache } from '@/util/storageUtils'
import { CTCE_USER_INFO } from '@/config/storageTypes'
import event from '@/net/event'
import { mapState, mapMutations, mapActions } from 'vuex'
const dom = weex.requireModule('dom')

export default {
    name: 'region',
    data(){
        return {
            datalist: [],
            activeIndex: null,
            placeNameAll: [],
            XZQHDM: []
        }
    },
    beforeCreate() {
        this.$notice.loading.show()
    },
    created(){
        this.placeNameAll = [...this.adcdName]
        this.XZQHDM = [...this.adcdId]
        this.getdata()
    },
    methods: {
        getdata () {
          event.XZQH(this.adcd).then(res => {
              this.datalist = res.result.datalist
              this.$nextTick(() => {
                this.scrollEnd()
                this.$notice.loading.hide()
              })
          })
        },
        polling(index, XZQHDM){
            this.$notice.loading.show()
            this.XZQHDM.push(XZQHDM)
            this.activeIndex = index;
            event.XZQH(XZQHDM).then(res => {
                this.datalist = res.result.datalist
                this.placeNameAll.push(this.$refs.item[index].attr.value)
                this.activeIndex = null;
                this.$nextTick(() => {
                  this.scrollEnd()
                  this.$notice.loading.hide()
                })
            })   
        },
        dele(ind) {
            this.$notice.loading.show()
            let adcd = ''
            if(this.placeNameAll.length == 1 && ind == 0){
                this.placeNameAll.splice(-1, 1)
                this.XZQHDM.splice(-1, 1)
                adcd = this.userAdcd
            } else {
                this.placeNameAll.splice(ind, this.placeNameAll.length)
                this.XZQHDM.splice(ind, this.XZQHDM.length)
                adcd = this.XZQHDM[ind-1]
            }
            event.XZQH(adcd).then(res => {
                this.datalist = res.result.datalist
                this.$nextTick(() => {
                    this.$notice.loading.hide()
                })
            })
        },
        sureBtn(){
          const length = this.XZQHDM.length
          if (length === 0) {
            this.changeAdcd(this.userAdcd)
          } else {
            this.changeAdcd(this.XZQHDM[length - 1])
          }
          this.changeAdcdName(this.placeNameAll)
          this.changeAdcdId(this.XZQHDM)
          this.changeSbcj('')
          this.getSBCJ(this)
          this.getAzddList(this)
          this.$emit('closeList')
        },
        scrollEnd () {
            const length = this.placeNameAll.length
            if (length !== 0) {
                dom.scrollToElement(this.$refs.placeOne[length - 1], {})
            }
        },
        ...mapMutations(['changeAdcd', 'changeAdcdName', 'changeAdcdId', 'changeSbcj', 'changeModel']),
        ...mapActions(['getSBCJ', 'getSBXH', 'getAzddList'])
    },
    computed: mapState(['userAdcd', 'adcd', 'adcdName', 'adcdId'])
}
</script>
<style scoepd>
.divisionG {
    background-color: rgba(0,0,0,0.4);
    flex: 1;
}
.listCont{
    width: 750px;
}
.listContItem{
    width: 750px;
    height: 100px;
    border-bottom-color: #ccc;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 15px;
    background-color: white;
}
.text{
    font-size: 29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
}
.choice{
    width: 750px;
    height: 100px;
    background-color: rgba(238,238,238,1);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-right: 15px;
    padding-left: 15px;
}
.choiceItem{
    display: block;
    width: 600px;
    height: 60px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.textParent{
    flex-direction: row;
}
.placeName{
    /* padding-right: 15px; */
    font-size: 29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(62,175,252,1);
    border-bottom-color: rgba(62,175,252,1);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.sure{
    width: 100px;
    height: 50px;
    background-color:rgba(62,175,252,1);
    border-radius:8px;
    justify-content: center;
    align-items: center;
}
.place{
    font-size: 29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(249,54,80,1);
    border-bottom-color: red;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.sureItem{
    font-size: 25px;
    font-family:PingFangSC-Regular;
    color:rgba(255,255,255,1);
}
.active{
    background-color: rgba(204,204,204,1);
    color: #fff;
}
.standardDirection{
    color: #999;
    padding-left: 10px;
    padding-right: 10px;
}
.standardDirection:first-child{
    border: none;
}
</style>
